<template>
	<div class="newsTrends">
		<div class="banner">
			<h1>新闻动态</h1>
		</div>
		<div class="container">
			<div class="newsCon" ref="newsCon">
				<ul>
					<li class="newsList" @click="handleClick1()">
						<img src="./img/news-1.png" alt="新闻动态">
						<div class="info">
							<h2>黑科技重磅来袭，赋能e修鸽合伙人</h2>
							<span>2018-10-25</span>
							<p>现今的互联网家装市场环境，已经度过了初期的混乱，而e修鸽成立于2015年，伴随着互联网家装行业的进化和迭代，在摸爬滚打中一步步成长为行业准独角兽企业。</p>
						</div>
					</li>
					<li class="newsList" @click="handleClick2()">
						<img src="./img/news-2.png" alt="新闻动态">
						<div class="info">
							<h2>智慧家装与人工智能，解决家装获客痛点</h2>
							<span>2018-10-25</span>
							<p>近年来，如何把家装与人工智能相结合，是很多传统企业、互联网公司非常关注的问题。智加云正是抓住了行业机会，通过软硬件一体化来组建家装建材营销展示解决方案</p>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	export default {
		name: 'newsTrends',
		data(){
			return {
				
			}
		},
		mounted(){
			
		},
		methods :{
			handleClick1(){
				window.location.href="https://mp.weixin.qq.com/s/itLJXi7rUMdDfJBOw8_NfQ";
			},
			handleClick2(){
				window.location.href="https://mp.weixin.qq.com/s/vwI52UxFyVBfs6U43bpQuA";
			}
		}
	}
</script>

<style lang="stylus" scoped>
	.newsTrends{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/xwdt-bg@3x.jpg') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
			}
		}
		.container{
			width: 100%;
			height: 6.18rem;
			background: #F3F6FB;
			overflow: hidden;
			position: relative;
			.newsCon{
				width: 92%;
				margin-left: 4%;
				padding-bottom: 0.8rem;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.newsList{
					width: 99%;
					height: 1.58rem;
					background: #fff;
					border-radius: 0.1rem;
					display: flex;
					flex-direction: row;
					background: #fff;
					overflow: hidden;
					padding: 0.27rem 0;
					margin: 0.4rem 0;
					&:last-child{
						margin-bottom: 0;
					}
					img{
						flex: 0 0 2rem;
						width: 2rem;
						height: 1.5rem;
						margin-left: 0.2rem;
					}
					.info{
						width: 65%;
						display: flex;
						flex-direction: column;
						margin-left: 0.2rem;
						h2{
							font-size: 0.3rem;
							color: #333;
							margin-bottom: 0.15rem;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						span{
							font-size: 0.2rem;
							color: #999;
							margin-bottom: 0.15rem;
						}
						p{
							font-size: 0.24rem;
							color: #999;
							display: -webkit-box;
							/* ! autoprefixer: off */  
							-webkit-box-orient: vertical;
							/* autoprefixer: on */ 
							-webkit-line-clamp: 2;  
							overflow: hidden;
							line-height: 1.4;
						}
					}
				}
			}
		}
	}
</style>




















